<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form>
    <div>
      <label for="username">用户名：</label>
      <input type="text" name="username" id="username">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" name="password" id="password">
    </div>
    <div>
      <input id="btn" type="button" value="提交">
    </div>
  </form>
  <script type="text/javascript">
  var btn = document.getElementById('btn')

  btn.onclick = function () {
    var uname = document.getElementById('username').value
    var pwd = document.getElementById('password').value
    var xhr = new XMLHttpRequest()
    xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata')
    // bookname=nihao&author=nihao&publisher=hello
    var fd = new FormData()
    fd.append('uname', uname)
    fd.append('pwd', pwd)
    xhr.send(fd)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var ret = xhr.responseText
        console.log(ret)
      }
    }
  }
  </script>
</body>
</html>